<template>
    <el-dialog title="测试接口" :visible.sync="dialogVisible" :before-close="handleClose" width="1440px">
        <div class="doc-invoke-dialog" v-loading="loading">
            <el-row class="doc-invoke-dialog__table">
                <el-col :span="24">
                    <el-table 
                        :data="list" 
                        :row-key="getRowKeys"
                        @current-change="handleSelectionChange"
                        max-height="200"
                        border
                    >
                        <el-table-column label="选择" width="55" align="center">
                            <template slot-scope="scope">
                                <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="接口调用URL" prop="requestPath" show-overflow-tooltip width="200"></el-table-column>
                        <el-table-column label="服务中文名称" prop="apiName" show-overflow-tooltip width="150"></el-table-column>
                        <el-table-column label="服务英文名称" prop="apiNameEn" show-overflow-tooltip width="150">
                            <template slot-scope="scope">
                                {{ scope.row.apiNameEn || '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="版本号" prop="apiVersion" show-overflow-tooltip align="center">
                            <template slot-scope="scope">
                                {{ scope.row.apiVersionOut || scope.row.apiVersion || '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="接口所属组" prop="groupName" show-overflow-tooltip width="150">
                            <template slot-scope="scope">
                                {{ scope.row.groupName || '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="请求方式" prop="requestMethod" show-overflow-tooltip></el-table-column>
                        <el-table-column label="接口状态" prop="apiStatus" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{ $enum.SERVICE_API_STATUS_MAP[scope.row.apiStatus] || '-'}}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <div class="doc-invoke-dialog__toolbar">
                <application-edit-json-editor :content-height="450" title="请求报文" readonly @validate="onValidateApi"></application-edit-json-editor>
                <application-edit-json-editor :content-height="450" :title="`响应报文${subscribed != 1 ? '（此接口未订阅，只返回10条数据）' : ''}`" v-model="jsonResult" readonly type="output"></application-edit-json-editor>
            </div>
        </div>

        <!-- <span slot="footer" class="doc-invoke-dialog__footer">
            <el-button type="primary" :disabled="loading" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="info" @click="onClose">关闭</el-button>
        </span> -->
    </el-dialog>
</template>

<script>
import ApplicationEditJsonEditor from "@/views/service/application/components/ApplicationEditJsonEditor";
import { invokeApi } from "@/api/dataService/pool"

export default {
    name: 'docTryInvokeDialog',
    components: {
        ApplicationEditJsonEditor
    },
    model: {
        prop: "visible",
        event: "change"
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            loading: false,
            selection: null,
            jsonResult: '',
            tableRadio: '',
            subscribed: 1,
        };
    },
    watch: {
        list(value) {
            if (value && value.length) {
                this.tableRadio = value[0]
                this.selection = value[0]
                this.subscribed = value[0].currentUserSubscribed
            }
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        },
    },
    methods: {
        onClose() {
            this.dialogVisible = false
        },
        getRowKeys(row) {
            return row.id;
        },
        handleSelectionChange(val) {
            this.selection = val;
            this.subscribed = val.currentUserSubscribed
        },
        handleClose(done) {
            this.$emit('update:list', [])
            this.jsonResult = ''
            done()
        },
        onValidateApi() {
            if (!this.selection || this.loading) {
                this.msgError('请选择要试用的接口')
                return
            }
            this.loading = true
            
            let params = {
                apiId: this.selection.id,
                invokeType: 2,
                requestParam: "{\"pageSize\":10,\"pageNum\":0}" // V1.1 固定参数
            }
            invokeApi(params).then(res => {
                if (res.code == 200) {
                // this.jsonResult = res.data.length ? JSON.stringify(res.data) : ''
                this.jsonResult = JSON.stringify(res)
                this.loading = false
                }
            }).catch(() => {
                this.loading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.doc-invoke-dialog {
    &__table {
        margin-bottom: 22px;
    }

    &__toolbar {
        display: flex;

        & > div {
            flex: 1;

        &:first-child {
                margin-right: 16px;
            }
        }
    }
    &__footer {
        display: flex;
        justify-content: center;
    }
}
</style>